<template>
    <div class="left-bottom-box">
        <div class="left-bottom-box-header">
            <span class="title">服务订单情况</span>
            <span class="number">\02</span>
        </div>
        <div class="left-bottom-box-table">
            <ScrollTable :columns="columns" :dataSource="data">
                <template #serviceCase="{ row }">
                    <span>{{
                        row.serviceCase === 1 ? "上门按摩" : "上门洗脚"
                    }}</span>
                </template>
                <template #status="{ row }">
                    {{ row.status === 1 ? '已预定' : '未预定' }}
                </template>
            </ScrollTable>
        </div>
    </div>
</template>

<script>
import ScrollTable from "./Table.vue";
import { columns, data } from "./config";
export default {
    components: {
        ScrollTable,
    },
    data() {
        return {
            columns,
            data,
        };
    },
};
</script>

<style lang="less" scoped>
.left-bottom-box {
    width: 100%;
    min-height: 600px;
    background: url("@/assets/kanban/bg/scroll-table.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;

    &-header {
        padding-top: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 16px;
        padding-right: 16px;
        .title,
        .number {
            font-size: 0.2rem;
            font-weight: 600;
        }
        .title {
            color: #69defa;
        }
        .number {
            color: #7bb9ff;
            font-size: 0.3rem;
        }
    }
    &-table {
        margin-top: 26px;
    }
}
</style>
